<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
	<link rel="stylesheet" href="/plugins/select2/select2.css" />
	<link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
	<script src="/plugins/select2/select2.min.js" type="text/javascript"></script>
	<!--图片上传-->
	<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
	<script>
		var editor;
		KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {
				allowFileManager : true
			});
		});
		var editor1;
		KindEditor.ready(function(K) {
			editor1 = K.create('textarea[name="content1"]', {
				allowFileManager : true
			});
		});
		var editor2;
		KindEditor.ready(function(K) {
			editor2 = K.create('textarea[name="content2"]', {
				allowFileManager : true
			});
		});
		function add(){
			//获取项目介绍，包装列表和售后服务的内容
			var introduction = editor.html();
			var packageList = editor1.html();
			var saleService = editor2.html();
			//alert(saleService)
			//获取三级下拉框中的内容
			var category1Id = $("#select1").val();
			var category2Id = $("#select2").val();
			var category3Id = $("#select3").val();
			//alert(category3Id)
			//商品扩展属性,获取两个框的属性
			var input1 =document.getElementsByName("item1");
			var arr = [];
			for (var i = 0; i < input1.length; i++){
				var span = $(input1[i]).find("span").text();
				var input =$(input1[i]).find("input").val();
				arr.push({text:span,value:input});
			}
			var customAttributeJson = JSON.stringify(arr);

			//获取图片下拉框
			var trs = $("#img_id").find("tr")
			var str = []
			for (var i = 0; i < trs.length; i++) {
				var tds = $(trs[i]).find("td")
				var item = {color:$(tds[0]).find("input").val(),url:$(tds[1]).find("img").attr("src")}
				str.push(item)
			}
			var itemImagesJson = JSON.stringify(str)
			//获取规格信息
			var cationName = $("[name=specificationName]");
			var cationValue = $("[name=specificationValue]:checked");
			var arrXl = [];
			for (var x = 0; x < cationName.length; x++){
				arrXl.push({attributeName:cationName[x].value,attributeValue:[cationValue[x].value]})
			}
				var specificationJson = JSON.stringify(arrXl);
			console.log(specificationJson)
			var json = {};
			var itemArr = [];

			var attkryArr = [];
			for (var m = 0; m < cationName.length; m++){
				attkryArr.push(cationName[m].value)
			}

			var trs = $("#tableId").find("tr"); //获取每个tr
			for (var i = 1; i < trs.length; i++){
				var tds = $(trs[i]).find("td") //获取每个td

				var tdZero = $(tds[0]).html().trim();
				var tdOne = $(tds[1]).html().trim();
				var inputTwo = $(tds[2]).find("input").val();
				var inputThree = $(tds[3]).find("input").val();
				json[attkryArr[0]] = tdZero;
				json[attkryArr[1]] = tdOne;
			}

			var goodsName = $("#goodsName").val();
			var caption = $("#caption").val();
			var title = goodsName + caption;
			//console.log(title)
			//sku价格
			var price = $("#prices").val();
			//库存
			var num = $("#num").val();

			var image = $("#image").val();

			//var category = $("#goodsName").val();
			//取值
			var category = $("#names").val();
			//console.log("===="+category)

			var obj = $("#select_brandId option:selected");
			var brand = obj.text();

			var categoryId = $("#select3").val();

			var sellPoint = editor.html();

			itemArr.push({title:title,sellPoint,sellPoint,price:price,num:num,image:image,categoryId:categoryId,status:1,createTime:new Date(),updateTime:new Date(),category:category,brand:brand,spec:json})
			var item = JSON.stringify(itemArr)


			$.ajax({
				url:"/goodController/increase",
				data:$("#goods").serialize()+"&introduction="+introduction+"&packageList="+packageList+"&saleService="+saleService
				+"&customAttributeItems="+customAttributeJson+"&itemImages="+itemImagesJson+"&tbItem=" + item,
				dataType:"json",
				type:"post",
				success:function (result){
					if (result.code == 10000){
						alert("增加成功");
						window.location.reload();
					}
				}

			})

		}
		$(function () {
			$('#myFile').fileinput({
				language: 'zh',
				uploadUrl: '/file/upLoadFile',
				browseClass: 'btn btn-primary',
				allowedFileExtensions: ['jpg', 'png', 'jpeg','gif', 'txt', 'pdf', 'xls', 'xlsx'],
				maxFileSize: 40240,
				maxFileCount: 3,
				enctype: "multipart/form-data",
			});

			$("#myFile").on('fileuploaded',function (event,data,previewId,index){
				var imgUrl = data.response.data;
				$("#image").val(imgUrl);
			})

		})
		//图片上传
		function uploadFile() {
			var url = $("#image").val();
			var color = $("#color").val();
			var table = "";
			table += '<tr>';
			table += '<td>';
			table += '<input name = "color" id="color" value="'+color+'">';
			table += '</td>';
			table += '<td>';
			table += '<img alt="" src="'+url+'" width="100px" height="100px">';
			table += '</td>';
			table += '<input type="hidden"  id="url" value="'+url+'">'
			table += '</td>'
			table += '<td> <button type="button" class="btn btn-default" title="删除" onclick="remove(this)"><i class="fa fa-trash-o"></i> 删除</button></td> '
			table += '</tr>'
			$("#img_id").append(table)
		}
		function remove(obj){
			$(obj).parent().parent().remove();
		}
		$(function (){
			getData(0);
		})
		var pid = 0;
		function getData(obj){
			 pid = obj;
			$.ajax({
				url:"/goodController/catList",
				dataType:"json",
				data:{parentId:obj},
				type:"post",
				success:function (result){
					var list = result.data;
					var table = "";
					var table = "<option value='-1'>请选择</option>";
					for (var i = 0; i < list.length; i++) {
						table += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
					}
					$("#select1").html(table);
			   }
			})
		}
		function sellerId1(obj){
			pid = obj;
			$.ajax({
				url:"/goodController/catList",
				dataType:"json",
				data:{parentId:obj},
				type:"post",
				success:function (result){
					var list = result.data;
					var table = "<option value='-1'>请选择</option>";
					for (var i = 0; i < list.length; i++) {
						table += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
					}
					$("#select2").html(table);
				}
			})
		}
		function sellerId2(obj){
			pid = obj;
			$.ajax({
				url:"/goodController/catList",
				dataType:"json",
				data:{parentId:obj},
				type:"post",
				success:function (result){
					var list = result.data;
					var table = "";
					for (var i = 0; i < list.length; i++) {
						table += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
					}
					$("#select3").html(table);
					$("#typeId").val(list[0].typeId);
					var typeId = list[0].typeId;
					typeList(typeId);

				}
			})
		}
		$(function (){
			$("#type").select2();
		})
		function typeList(typeId){
				$.ajax({
					url:"/goodController/templatesList/"+typeId,
					dataType:"json",
					type:"post",
					success:function (result){
						var list = result.data;
						$("#names").val(list.name)
						var parse = JSON.parse(list.brandIds);
						var str ="";
						for (var i = 0; i < parse.length; i++) {
							str +="<option value='"+parse[i].id+"'>"+parse[i].text+"</option>";
						}
						$("#type").html(str);
					},
				})
		}
		function typeLists(){
			var typeId = $("#typeId").val()
			$.ajax({
				url:"/goodController/templatesLists",
				data:{typeId:typeId},
				dataType:"json",
				type:"post",
				success:function (result){
					// console.log(result)
					var specVO = result.data;
					// console.log(specVO)
					var specVOList1 = specVO.specVOList;
					console.log(specVOList1)
					var content = "";
					for (let i = 0; i < specVOList1.length; i++) {
						content += '<div name="tbSpec">';
						content += '<input type="hidden" name="specificationName" value="'+ specVOList1[i].tbSpecification.specName +'">';
						content += '<div class="col-md-2 title">'+ specVOList1[i].tbSpecification.specName +'</div>';
						content += '<div class="col-md-10 data" name="option">';
						var optionList1 = specVOList1[i].optionList;
						for (var j=0; j<optionList1.length; j++){
							content += '<span>';
							content += '<input type="hidden"  value="'+ optionList1[j].optionName +'">';
							content += '<input  type="checkbox" name="specificationValue" value="'+optionList1[j].optionName+'">'+optionList1[j].optionName;
							content += '</span>';
					}
						content += "</div>";
						content += "</div>";
					}
					$("#specVO").html(content);


				},
			})
		}
		//扩展属性
		function selectItems(){
			//获取模板id属性值
			var id = $("#typeId").val();
			$.ajax({
				url:"/goodController/selectItem",
				type:"post",
				data:{id:id},
				dataType:"json",
				async:true,
				success:function (result){
					var list = result.data;
					var custom = JSON.parse(list.customAttributeItems)

					var table ="";
					for (var i = 0; i < custom.length; i++) {
							table +="<div class='row data-type' name='item1'>";
							table +="<div class='col-mditem1-2 title'><span>"+custom[i].text+"</span></div>";
							table +="<div class='col-md-10 data'><input class='form-control'></div>";
							table +="</div>";
						}
						$("#customAttribute").html(table);
				},
			})
		}
	</script>

</head>

<body class="hold-transition skin-red sidebar-mini">
            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">
						<form id="goods">
                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute"   onclick="selectItems()" data-toggle="tab">扩展属性</a>
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" onclick="typeLists()" >规格</a>
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->

                            <div class="tab-pane active" id="home">
                                <div class="row data-type">
								   <div class="col-md-2 title">商品分类</div>

		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" name="category1Id" id="select1" onchange="sellerId1(this.value)" >

		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" name="category2Id" id="select2"  onchange="sellerId2(this.value)">

													</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" name="category3Id" id="select3" >
													</select>
		                              			</td>
		                              			<td>
		                           	  				<input type="text" name="typeTemplateId" id="typeId">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>

		                              </div>


		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"  name="goodsName"  id="goodsName"  placeholder="商品名称" value="">
		                           </div>

		                           <div class="col-md-2 title">品牌

								   </div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" name="brandId" id="type">

									  </select>
		                           </div>

								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"  id="caption"  name="caption" placeholder="副标题" value="">
		                           </div>

		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control"  id="price" name="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>

		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>

		                           <div class="col-md-2 title editer">包装列表</div>
		                           <div class="col-md-10 data editer">
		                           	<textarea  name="content1"  style="width:800px;height:400px;visibility:hidden;"  placeholder="包装列表"></textarea>
		                           </div>

		                           <div class="col-md-2 title editer">售后服务</div>
		                           <div class="col-md-10 data editer">
		                               <textarea   name="content2"  style="width:800px;height:400px;visibility:hidden;"   placeholder="售后服务"></textarea>
		                           </div>

                                </div>
                            </div>

                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"   data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

					             </div>

								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>

											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="img_id">

					                    </tbody>
								 </table>

                                </div>
                            </div>


                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">

                            </div>

                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" name="isEnableSpec" >
			                        </div>
                            	</div>
                            	<p>

                            	<div>

	                                <div class="row data-type" id="specVO">
	                                </div>


	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody >
											<tr>
												<td>
													4.0
												</td>
												<td>
													3G
												</td>
												<td>
													<input class="form-control"  placeholder="价格" id="prices">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量" id="num">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>
													4.0
												</td>
												<td>
													4G
												</td>
												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>
													5.0
												</td>
												<td>
													3G
												</td>
												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>
													5.0
												</td>
												<td>
													4G
												</td>
												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
						                    </tbody>
									 	</table>

	                                </div>

	                            </div>
                            </div>
                          <div>
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->

                    </div>
						</form>
                   </div>


                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="add()" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
					<input type="hidden" id="names" value="">
				</div>

            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" id="color" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="file" id="myFile" name="myFile" multiple/>
									<input type="text" id="image" name="image">
					            </td>
								<td>
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" onclick="uploadFile()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->

       
</body>

</html>